{% extends "jarvis/base.html" %}

{% block content %}

 <script type="text/javascript">
  function toggleLight(area_name, device_name, value)
  {
  $.ajax({
      url: '/jarvis/areas/'+area_name+'/'+device_name+'/set/'+value
    });   
  }

  function removeDevice(area_name, device_name)
  {
  $.ajax({
        url: '/jarvis/areas/'+area_name+'/'+device_name+'/remove',
    });
  }
</script>


      <ul data-role="listview">
      {% for device in device_list %}
      <li area="{{area_name}}" device="{{device.device_name}}" >
	<a href="/jarvis/areas/{{area_name}}/{{device.device_name}}" >{{device.device_name}}
	  <select name="toggle" id="toggleSwitch" data-role="slider" status="{% if device.enabled %}on{%else%}off{% endif %}">
            <option value="off">Off</option>
            <option value="on" {% if device.enabled %} selected {% endif %}>On</option>
	  </select>
	</a>
	<a class="remove" data-mini="true" data-icon="delete"></a>
      </li>

{% empty %}
      <li>No devices have been registered for {{area_name}}</li>

{% endfor %}



<script type="text/javascript">
$( "select[name*='toggle']").on( "slidestop", function(event, ui) {
    parent = $(this).parents("li")
    device = parent.attr("device");
    area = parent.attr("area");
    if(parent.attr("status") != $(this).val())
    {
      toggleLight(area, device, $(this).val());
      parent.attr("status", $(this).val());
    }
});

$("a.remove").bind("click", function(event, ui){
    parent = $(this).parents("li");
    device = parent.attr("device");
    area = parent.attr("area");
    removeDevice(area, device);
    parent.remove();
});
</script>



{% endblock%}
